<template>
  <div>
    <v-app>
      <!-- Sizes your content based upon application components -->
      <v-main style="background-color: #F8F8F8; font-size: 0.85rem;">
          <!-- If using vue-router -->
          <router-view></router-view>
      </v-main>
      <v-bottom-navigation
        app
        grow
        :link="false"
        :ripple="false"
        active-class="naigation-active"
      >
        <v-btn  to="/" :value="0"> 回到首页
        </v-btn>
        <v-btn   @click="callCustomerService" :value="1"> 联系客服
        </v-btn>
        <v-btn  to="/loan/stores" :value="2"> 查看门店
        </v-btn>
        <v-btn  to="/loan/qa/words" :value="3"> 在线留言
        </v-btn>
      </v-bottom-navigation>
    </v-app>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  components: {
  },
    methods: {
        // 点击导航项触发的方法
        callCustomerService() {
            // 电话号码可以根据实际情况修改
            const phoneNumber = '10086';
            window.location.href = `tel:${phoneNumber}`;
        }
    }
};
</script>

<style lang="scss">
.v-item-group.v-bottom-navigation .naigation-active.v-btn.v-btn--active {
  .v-btn__content {
      color: #BA2B39;
      caret-color: #BA2B39;
  }
}
</style>
